<template>
  <div class="head">
    <div class="head-nav">
      <div class="nav-img">
        <img src="../assets/logon.png" alt="">
      </div>
      <div class="nav-type" style="width: 76%;">
        <ul class="nav">
          <li v-on:click="mgsType(0,'我的面板')">
            <i :class="0==num?'Myicon_icon':'My_icon'"></i>
            <i>我的面板</i>
          </li>
          <li v-on:click="mgsType(1,'设置')">
            <i :class="1==num?'Seticon_icon':'Set_icon'"></i>
            <i>设置</i>
          </li>
          <li v-on:click="mgsType(2,'直播')">
            <i :class="2==num?'Liveicon_icon':'Live_icon'"></i>
            <i>直播</i>
          </li>
          <li v-on:click="mgsType(3,'财务')">
            <i :class="3==num?'Financeicon_icon':'Finance_icon'"></i>
            <i>财务</i>
          </li>
          <li v-on:click="mgsType(4,'数据库')">
            <i :class="4==num?'Sqlicon_icon':'Sql_icon'"></i>
            <i>数据库</i>
          </li>
          <li v-on:click="mgsType(5,'工会')">
            <i :class="5==num?'Unionicon_icon':'Union_icon'"></i>
            <i>工会</i>
          </li>
          <li v-on:click="mgsType(6,'陪玩')">
            <i :class="6==num?'Gameicon_icon':'Game_icon'"></i>
            <i>陪玩</i>
          </li>
        </ul>
      </div>

      <div style="margin-top:1%;" @click="shop=!shop">
        <i class="el-icon-user-solid" style="font-size: 45px;"></i>
        管理员
        <i :class="shop==false?'el-icon-arrow-right':'el-icon-arrow-down'"></i>
        <el-link v-if="shop" @click="LoginOut">退出登录</el-link>
      </div>


    </div>
    <div class="head-body">
      <div class="body-left">
        <div class="left-left">
          <el-menu :default-active="stair">
            <el-submenu v-for="(val,name) in cp" :key="name" :index="name+''">
              <template slot="title">
                <span>{{val.label}}</span>
              </template>
              <el-menu-item v-for="(item,index) in val.children" @click='handleNodeClick(item)' :key="index">{{item.label}}</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <div class="body-right">

        <router-view v-if="isRouterAlive"></router-view>
      </div>

    </div>

  </div>
</template>


<script>
  //  bimport '@/js/reques.js'
  export default {
    name:'Head',
    provide() { // 注册一个方法
      return {
        reload: this.reload,
        isRouterAlive: true
      }
    },
    data () {
      return{
        admin:'超级管理员',
        mod:'Body',
        adminName:'',
        stair:'',
        second:'',
        shop:false,
        isRouterAlive: true,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        items:[
          {
            name:'我的面板',
            id:'amend',
            content:[{
              label:'个人信息',
              children:[{label:'修改密码',name:'ChPass'}]
            },
            ]
          },
          {
            name:'设置',
            id:'system',
            content:[
              {
                label:'系统设置',
                children:[{label:'基本参数设置',name:'Parameter'},
                  {label:'缓存机制设置',name:'Cache'},
                  {label:'直播服务器设置',name:'Server'},
                  {label:'收益分成设置',name:'Earnings'},
                  {label:'直播分类设置',name:'Category'},
                  {label:'首页轮播图设置',name:'Slide'},
                  {label:'头像框设置',name:'Frame'}
                ]
              },
              {
                label:'管理设置',
                children:[{label:'管理员管理',name:'AdminList'}]
              }
            ]
          },
          {
            name:'直播',
            id:'users',
            content:[{label:'用户管理',
              children:[{label:'所有用户列表',name:'Uall'},
                {label:'签约主播列表',name:'Contract'},
                {label:'在播房间列表',name:'ULine'},
                {label:'删除主播列表',name:'UDel'},
                {label:'推荐位管理',name:'Recommend'},
                {label:'主播等级设置',name:'Grade'},
                {label:'财富等级设置',name:'Rgrade'},
                {label:'实名审核',name:'Examine'},
                {label:'举报查看',name:'Report'}
              ]
            },
              {
                label:'礼物设置',
                children:[
                  {label:'所有礼物列表',name:'Gall'}]
              },
              {
                label:'靓号管理',
                children:[{label:'所有靓号列表',name:'Nall'},
                ]
              },
              {label:'游戏设置',
                children:[{label:'魔方游戏设置',name:'Rgame'},
                  {label:'魔方中奖纪录',name:'Win'},
                ]
              }
            ]
          },
          {
            name:'财务',
            id:'pay',
            content:[{
              label:'在线支付',
              children:[{label:'接口参数设置',name:'PayApi'}]
            },
              {
                label:'财务管理',
                children:[{label:'用户充值纪录',name:'Recharge'},
                  {label:'用户打赏记录',name:'Consume'},
                  {label:'管理员加值记录',name:'AdminRecord'}]
              },
              {
                label:'主播结算',
                children:[{label:'主播收礼记录',name:'Detail'},
                  {label:'主播提现申请',name:'Aaccount'}]
              },
              {
                label:'工会结算',
                children:[{label:'工会结算',name:'Udetail'}]
              },
            ]
          },
          {
            name:'数据库',
            id:'sql',
            content:[{label:'数据库',children:[{label:'数据库列表',name:'SqlList'},
              ]}]
          },
          {
            name:'工会',
            id:'apply',
            content:[{label:'工会管理',children:[{label:'公会列表',name:'Unrevised'},
                {label:'工会审核',name:'Verified'},
                {label:'已解散',name:'Pass'},
              ],
            },
            ]},
          {/*****************************************/
            name:'游戏陪玩',
            id:'accompany',
            content:[
              {label:'游戏类型',children:[{label:'类型列表',name:'gameType',limits:1},],  },
              {label:'游戏区服',children:[{label:'区服列表',name:'gameZone',limits:1},],  },
              {label:'游戏审核',children:[{label:'陪玩审核',name:'gameStatusCheck',limits:1},], },
              {label:'CP管理',children:[{label:'CP设置',name:'cpSet',limits:1},], },
              {label:'陪玩标签',children:[{label:'标签设置',name:'labelSetting',limits:1},], },
            ]}
        ],
        num:0,
        mun:'amend',
        mShow:0,
        w:'amend',
        map:false,
        current:''

      }
    },
    computed: {
      cp:function(){
        var _this=this
        var cp=[]
        var op=this.num
        cp=this.items[op].content
        return cp
      },

    },
    provide(){
      return {
        reload:this.reload
      }
    },
    methods:{
      reload() {
        this.isRouterAlive = false
        this.$nextTick(function() {
          this.isRouterAlive = true
        })
      },
      mgsType:function(e,p){
        this.num=e
        this.w=this.items[e].id
        this.second=''
      },
      handleNodeClick(res){
        this.$router.push({name:res.name})
      },
      reload () {
        this.isRouterAlive = false
        this.$nextTick(() => (this.isRouterAlive = true))
      },
      LoginOut(){
        this.$cookies.remove('token')
        this.$cookies.remove('adminName')
        this.$cookies.remove('adminType')
        this.$router.push('/Login')
      }
    },
    mounted(){
      var _this=this
      this.adminName=this.$cookies.get('adminName')
      this.items.forEach((val,index)=>{
        val.content.forEach((op,i)=>{
          op.children.forEach(sub=>{
            if(sub.name==_this.$route.name){
              _this.num=index
              this.stair=i+''
            }
          })
        })
      })
    }
  }
</script>

<style lang="scss">

  .head{
    min-width: 1600px;
    position: relative;
  }
  .head-nav{
    width: 100%;
    height: 90px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 3px rgba(231,231,231,0.5);
    display: flex;
    position: relative;
    .nav-img{
      width: 10%;
      height: 100%;
      margin: 1% 1%;
      img{
        width: 100%;
        height: 68%;
      }
    }
    .el-link{
      display: block;
      margin-left: 45px;
      height: 50px;
      line-height: 50px;
      font-weight: 600;
      font-size: 16px;
      /* border: 1px solid #333; */
      background: #fff;
      box-shadow: 0px 3px 3px 3px rgba(231,231,231,0.5);
      margin-top: 5px;
      text-align: center;
      /* width: 80px; */
      padding: 10px;
      border-radius: 5px;
    }
  }

  .nav-login{
    color: #fff;
    height: 11vh;
    line-height: 11vh;
  }
  .map{
    float: right;
    margin: 2px 28px 0 0;
    height: 26px;
    line-height: 13px;
    box-shadow: 0px 0px 5px #a5a2a2;
  }
  .el-menu-item.is-active{
    color: #333333;
  }
  .map-list{
    width: 600px;
    height: 480px;
    border: 1px solid #1e64c8;
    position: absolute;
    z-index: 1000;
    top: 20vh;
    left: 65vh;
    background-color: #FFFFFF;
  }
  .map-list>h3{
    background-color: #3076d9;
    color: #fff;
    font-size: 16px;
    padding: 2px 5px 5px 5px ;
  }
  .map-list>h3>span{
    float: right;
    padding: 2px 5px 5px 5px ;
  }
  .map-list>.map-body{
    overflow: auto;
    height: 449px;
    display: inline-flex;
    flex-wrap: wrap;
  }
  .map-body>.map-1{
    width: 180px;
    border: 1px solid #A4C0F7;
    margin: 4px;
  }
  .map-1>h4{
    background: #EDF2F8;
    font-weight: bold;
    padding-left: 5px;
  }
  .map-1>dl>dt{
    font-weight: bold;
    padding-left: 10px;
    margin-top: 5px;
  }
  .map-1>dl>dd{
    padding: 4px;
    padding-left: 20px;
  }
  .head-body{
    width: 100%;
    height: 90vh;
    display: flex;
  }
  .head-left{
    width: 10%;
    height: 100%;
    // background-color: #006600;
  }
  .nav{
    float: left;
    display: flex;
    margin: 1.5%;
    li{
      .My_icon{background-image: url(../assets/My.png);}
      .Myicon_icon{background-image: url(../assets/Myicon.png);}
      .Seticon_icon{background-image: url(../assets/seticon.png);}
      .Set_icon{background-image: url(../assets/set.png);}
      .Liveicon_icon{background-image: url(../assets/liveicon.png);}
      .Live_icon{background-image: url(../assets/live.png);}
      .Financeicon_icon{background-image: url(../assets/Financeicon.png);}
      .Finance_icon{background-image: url(../assets/Finance.png);}
      .Sql_icon{background-image: url(../assets/sql.png);}
      .Sqlicon_icon{background-image: url(../assets/sqlicon.png);}
      .Unionicon_icon{background-image: url(../assets/unionicon.png);}
      .Union_icon{background-image: url(../assets/union.png);}
      .Gameicon_icon{background-image: url(../assets/gameIcon.png);}
      .Game_icon{background-image: url(../assets/game.png);}
      img{
        width: 30px;
        height: 30px;
      }
      i{
        display: block;
        width: 64px;
        height: 30px;
        background-repeat: no-repeat;
        background-size: 30px;
        background-position-x: 19px;
        text-align: center;
        font-size: 13px;
      }
    }
    li:hover{
      border-top: 4px solid #317ef3;
      background-color: #F2F2F2;
    }
  }

  .body{
    display: flex;
    width: 100%;
  }
  .body-left{
    width: 12%;
    height: 100%;
  }
  .body-right{
    width: 88%;
    height: 95%;
    background-color: #EFF3F5;
    padding: 1%;
  }
  .Dlan{
    width: 100%;
    height: 30px;
    background-color: #CCCCCC;
    line-height: 30px;
  }
  .all{
    width: 98%;
    height: 100%;
    overflow: scroll;
    position: relative;
    background-color: #fff;
    padding: 5px;
  }
  .all::-webkit-scrollbar{
    display: none;
  }
  .left-left .el-tree{
    background-color: #0093D9;
    color: #fff;
    padding: 5px 5px;
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    background-color: rgba(255,255,255,0.3);
    color: #666666 !important;
  }
  .el-tree-node__content:hover{
    background-color: rgba(255,255,255,0.2);
  }

</style>
